<template>
  <!-- 修改数据 -->
  <div class="update">
    <div class="van-top">
      <van-nav-bar title="账号资料" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="header">
      <van-image
        round
        width="2.5rem"
        height="2.5rem"
        fit="cover"
        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      />
      <i @click="updateUrl">
        修改头像
        <van-icon name="arrow" />
      </i>
      <van-popup
        v-model:show="show"
        position="bottom"
        :style="{ height: '24%', background: '#f2f2f2' }"
      >
        <van-button type="default" size="large">拍照</van-button>
        <van-button type="default" size="large">从相册选择</van-button>
        <van-button
          type="default"
          @click="cancel"
          size="large"
          style="margin-top: 8px"
          >取消</van-button
        >
      </van-popup>
    </div>
    <div class="cell">
      <van-cell title="昵称" is-link to="/modifyName" :value="this.msg" />
      <van-cell title="手机号码" is-link :value="phone" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'update',
  data() {
    return {
      show: false,
      // msg: JSON.parse(localStorage.getItem('vuex')).login.userInfo.nickname,
      msg: this.$store.getters['userModule/userInfo'].nickname,
      phone: this.$store.getters['userModule/userInfo'].phone,
    }
  },
  // created() {
  //   console.log(localStorage.getItem('username'))
  //   if (localStorage.getItem('username')) {
  //     this.msg = localStorage.getItem('username')
  //   }
  // },
  methods: {
    onClickLeft() {
      this.$router.push('/setting')
    },
    updateUrl() {
      this.show = true
    },
    cancel() {
      this.show = false
    },
  },
}
</script>

<style scoped>
.update {
  background: #f2f2f2;
}
.van-top /deep/ .van-nav-bar__title {
  font-size: 18px;
  font-weight: bold;
}
.van-top /deep/ .van-nav-bar .van-icon {
  color: black !important;
}
.header {
  height: 60px;
  margin: 10px 0;
  background: #fff !important;
}
.header .van-image {
  margin: 5px 5px 5px 20px;
}
.header i {
  float: right;
  margin-right: 10px;
  line-height: 60px;
  font-style: normal;
  font-size: 16px;
}
.cell {
  margin: 10px 0;
}
.van-cell {
  height: 60px;
  font-size: 16px;
}
</style>
